|
实践过程 最近boss提出了一个需求，需要支持打开的页面自动翻译成英文，csdn来回找资料，最终确定使用谷歌翻译js插件，这个插件测试只支持手动翻译，没能满足打开页面通过判断浏览器语言自动翻译成英文的需求，只能想办法攻克一下这个问题
确立最终实现目标，实现浏览器设置网页打开语言不是zh-CN 中文的强制转成英文
//获取浏览器语言
var localLanguage;
// console.log(navigator);
if (navigator.language) {
localLanguage = navigator.language;
}else {
localLanguage = navigator.browserLanguage;
}
分析谷歌js设置 ，谷歌js固定设置指定语言后，语言后本地会记录cookie标记当前翻译的是什么语言
// reload 自动强制将网站代码转成英文
var isLanguage= GetCookie('googtrans');
// 初始化发现浏览器语言是英文的强制将页面文字转成英文
if(isLanguage==null && localLanguage=='en'){
// 设置cookie /zh-CN/en 中文转换英文
SetCookie("googtrans", '/zh-CN/en', 3, "/", window.location.host, false);
var hrefarr=window.location.host.split('.');
// 设置cookie
var domain="."+hrefarr[1]+'.'+hrefarr[2];
SetCookie("googtrans", '/zh-CN/en', 3, "/", domain, false);
$('.goog-te-combo').val('en');
// reload强制转成英文
window.location = '#googtrans(en|en)';
location.reload();
}
}
3.需要转英文的html中引入封装好的谷歌翻译js
//GoogleTranslate.js
//获取浏览器语言
var localLanguage;
// console.log(navigator);
if (navigator.language) {
localLanguage = navigator.language;
}else {
localLanguage = navigator.browserLanguage;
}
// 检查是否支持此语言翻译，不支持就把面板设为中文，或你想要的语言，只能是以上80种语言之一
var allLanguage = 'de,hi,lt,hr,lv,ht,hu,zh-CN,hy,uk,mg,id,ur,mk,ml,mn,af,mr,uz,ms,el,mt,is,it,my,es,et,eu,ar,pt-PT,ja,ne,az,fa,ro,nl,en-GB,no,be,fi,ru,bg,fr,bs,sd,se,si,sk,sl,ga,sn,so,gd,ca,sq,sr,kk,st,km,kn,sv,ko,sw,gl,zh-TW,pt-BR,co,ta,gu,ky,cs,pa,te,tg,th,la,cy,pl,da,en,tr'.split(',');
if($.inArray(localLanguage,allLanguage)==-1){
localLanguage = "zh-CN";
}
if(localLanguage!='zh-CN'){
// 资源请求路径
var resourcesUrl = '/api/html/googleTrans/trans';
// var resourcesUrl = ctx+"js/plugins/googleTrans";//这里应该写你的服务器资源地址
// 这里设置翻译面板的语言，这里通过浏览器获取本地语言，你也可以自己设置
// 支持以下80种语言翻译
console.log("当前语言环境"+localLanguage);
// alert(localLanguage);
// window.οnlοad=function(){
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'auto',
// 一共80种语言选择，这个是你需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi
// includedLanguages:
// 'de,hi,lt,hr,lv,ht,hu,zh-CN,hy,uk,mg,id,ur,mk,ml,mn,af,mr,uz,ms,el,mt,is,it,my,es,et,eu,ar,pt-PT,ja,ne,az,fa,ro,nl,en-GB,no,be,fi,ru,bg,fr,bs,sd,se,si,sk,sl,ga,sn,so,gd,ca,sq,sr,kk,st,km,kn,sv,ko,sw,gl,zh-TW,pt-BR,co,ta,gu,ky,cs,pa,te,tg,th,la,cy,pl,da,tr',
includedLanguages: 'zh-CN,en',
// 选择语言的样式，
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
// 自动显示翻译横幅，就是翻译后顶部出现的那个，有点丑，设置这个属性不起作用的话，请看文章底部的其他方法
autoDisplay: false,
},
'trans'// 触发按钮的id
);
// 自定义按钮样式，因为没有api，通过dom+覆盖样式的方法实现，请查看顶部的style部分
$(".goog-te-gadget-icon").remove();
$(".goog-te-menu-value").remove();
}
window.onload=function(){
//
// reload 自动强制将网站代码转成英文
var isLanguage= GetCookie('googtrans');
// 初始化发现浏览器语言是英文的强制将页面文字转成英文
if(isLanguage==null && localLanguage=='en'){
// 设置cookie
SetCookie("googtrans", '/zh-CN/en', 3, "/", window.location.host, false);
var hrefarr=window.location.host.split('.');
// 设置cookie
var domain="."+hrefarr[1]+'.'+hrefarr[2];
SetCookie("googtrans", '/zh-CN/en', 3, "/", domain, false);
$('.goog-te-combo').val('en');
// reload强制转成英文
window.location = '#googtrans(en|en)';
location.reload();
}
}
var googtrans_script = document.createElement("script");
googtrans_script.type = "text/javascript";
googtrans_script.charset = "UTF-8";
googtrans_script.src = '/api/html/googleTrans/trans/js/element.js?cb=googleTranslateElementInit';
document.body.appendChild(googtrans_script);
}
// 设置cookie
function SetCookie(a, c, b, d, e, g) {
var f = new Date;
f.setTime(f.getTime() + b * 86400);
b == null || f.toGMTString();
document.cookie = a + "=" + escape(c) + (d == null ? "" : ";path=" + d) + (e == null ? "" : ";domain=" + e) + (g == true ? ";secure" : "")
}
// 获取cookie
function GetCookie(a) {
var c = null,
b = document.cookie + ";",
d = a + "=",
a = b.indexOf(d);
a != -1 && (a += d.length, c = b.indexOf(";", a), c = unescape(b.substring(a, c)));
return c
}
function contains(array, obj) {
var i = a.length;
while (i--) {
if (a[i] === obj) {
return true;
}
}
return false;
}
4.谷歌翻译js插件文件和语言js库资源免费下载不需要积分下载 https://download.csdn.net/download/qq_41407687/12902817
|